<script setup>
import NavBar from "@/components/common/navbar/NavBar.vue";
import {useRoute, useRouter} from "vue-router";
import {onMounted, reactive, ref, toRefs} from "vue";
import {getDetail} from "@/network/detail";
import GoodsList from "@/components/content/goods/GoodsList.vue";
import {addCart} from "@/network/cart";
import {showSuccessToast} from "vant";
import {useStore} from "vuex";

const route = useRoute()
const router = useRouter()
const store = useStore()
const id = ref('');
const active = ref(0)
const book = reactive({
  detail: {},
  like_goods: [],
})
const {detail, like_goods} = toRefs(book)
// 加入购物车
const handleAddCart = () => {
  // 将商品放入购物车
  addCart({goods_id: book.detail.id, num: 1}).then(res => {
    // 如果返回的状态码为 201 或 204 则提示：添加成功
    // 201 首次添加状态码（即购物车无此商品），204 再次添加状态码（即购物车已经有此商品）
    if (!res) {
      return;
    }
    if ([201, 204].includes(res.status)) {
      showSuccessToast('添加成功');
      // 更改购物车商品数量
      store.dispatch('updateCart')
    }
  })

}
// 立即购买
const goToCart = () => {
  // 将商品放入购物车
  addCart({goods_id: book.detail.id, num: 1}).then(res => {
    if (!res) {
      return;
    }
    // 如果返回的状态码为 201 或 204 则提示：添加成功
    // 201 首次添加状态码（即购物车无此商品），204 再次添加状态码（即购物车已经有此商品）
    if (['201', '204'].includes(res.status.toString())) {
      showSuccessToast('添加成功');
      // 更改购物车商品数量
      store.dispatch('updateCart')
      // 添加成功后跳转到订单结算界面
      router.push({path: '/createorder'})
    }
  })
}
onMounted(() => {
  id.value = route.query.id;
  getDetail(id.value).then(res => {
    book.detail = res.goods;
    book.like_goods = res.like_goods;
  })
})
</script>

<template>
  <div class="box">
    <nav-bar>
      <template v-slot:default>商品详情</template>
    </nav-bar>
    <div class="">
      <van-image :src="detail['cover_url']"
                 lazy-load
                 style="margin-top: 50px"
                 width="100%"
      />
      <van-card
          :desc="detail.description"
          :num="detail['stock']"
          :price="parseInt(detail.price).toFixed(2)"
          :title="detail.title"
      >
        <template #tags>
          <van-tag plain type="primary">标签</van-tag>
          <van-tag plain type="primary">标签</van-tag>
        </template>
        <template #footer>
          <van-button type="warning" @click="handleAddCart">加入购物车</van-button>
          <van-button type="danger" @click="goToCart">立即购买</van-button>
        </template>
      </van-card>
      <van-tabs v-model:active="active">
        <van-tab title="概述">
          <div class="content" v-html="detail.details"></div>
        </van-tab>
        <van-tab title="热评">
          <div v-for="item in detail.comments" :key="item">
            {{ item }}
          </div>
        </van-tab>
        <van-tab title="相关图书">
          <goods-list :goods="like_goods"></goods-list>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.box {
  padding-bottom: 50px;
}

.content {
  padding: 10px;

  img {
    max-width: 100% !important;
    height: auto;
  }
}
</style>